<template>
  <div class="my-padding">
    <el-form ref="form" :model="form" label-width="8rem">
      <el-form-item>
        <span slot="label">
          伙伴姓名
          <span class="red">*</span>
        </span>
        <el-input
          v-model="form.name"
          type="text"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="form.sex" label="男" >男</el-radio>
        <el-radio v-model="form.sex" label="女" >女</el-radio>
      </el-form-item>
      <el-form-item>
        <span slot="label">
          手机号
          <span class="red">*</span>
        </span>
        <el-input
          v-model="form.telephone"
          placeholder="请输入11位数字"
          @change="confirmTelephone"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">其他联系方式</span>
        <el-row>
          <el-col :span="2">
            <el-button plain @click="addtelephoneItem()" >添加</el-button>
          </el-col>
          <el-col :span="18">
            <div v-for="(item, index) in form.telephoneList" :key="index">
              <div style="width:60%">
                <el-row>
                  <el-col :span="15">
                    <el-input v-model="item.telephones" placeholder="请输入联系方式" ></el-input>
                  </el-col>
                  <el-col :span="5">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      @click="deletetelephoneItem(item, index)"
                    ></el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="微信号">
        <el-input v-model="form.weixin" placeholder="微信号" ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="form.email" placeholder="电子邮箱" ></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">
          单位名称
          <span class="red">*</span>
        </span>
        <el-input v-model="form.company" placeholder="单位名称（没有单位写个人）" ></el-input>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input v-model="form.address" placeholder="联系地址"></el-input>
      </el-form-item>
      <el-form-item label="工作部门">
        <el-input v-model="form.department" placeholder="工作部门" ></el-input>
      </el-form-item>
      <el-form-item label="工作岗位">
        <el-input v-model="form.post" placeholder="工作岗位"></el-input>
      </el-form-item>
      <el-form-item label="伙伴来源">
        <el-select v-model="form.source" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in sourceList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="伙伴对应项目">
        <el-input v-model="form.item" placeholder="伙伴对应项目"></el-input>
      </el-form-item>
      <el-form-item label="伙伴对应债权">
        <el-input v-model="form.debt" placeholder="伙伴对应债权"></el-input>
      </el-form-item>

      <el-form-item label="机构类型">
        <el-select v-model="form.orgType" multiple placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in orgTypeList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他机构" v-if="form.orgType==='26'">
        <el-input v-model="form.orgRemark" placeholder="其他机构"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">
          同业业务类型
          <span class="red">*</span>
        </span>
        <el-select v-model="form.peerInfo.bizSList" multiple placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in peerTypeList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <span slot="label">
          同业合作方式
          <span class="red">*</span>
        </span>
        <el-select v-model="form.peerInfo.coopSList" multiple placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in peerBizList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="覆盖地区">
        <span slot="label">
          覆盖地区
          <span class="red">*</span>
        </span>
        <el-cascader
          style="width:100%"
          placeholder="试试搜索:江苏"
          v-model="form.overArea"
          :options="provinceList"
          :props="{value:'regionId',label:'regionName',children:'children', multiple: true }"
          filterable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.note" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateData()">保存</el-button>
        <el-button @click="closeWindow">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/assets";

  export default {
    data() {
      return {
        form: {
          partnerType: 5,
          name: "",
          sex: "",
          telephone: "",
          telephoneList: [],
          weixin: "",
          email: "",
          company: "",
          department: "",
          post: "",
          source: "",
          item: "",
          debt: "",
          note: "",
          address: "",
          orgType: "",
          orgRemark: "",
          overArea: [],
          peerInfo: {
            bizSList: [],
            coopSList: []
          }
        },
        assetAttrList: [],
        provinceList: [],
        sourceList: [],
        bizTypeList: [],
        orgTypeList: [],
        peerTypeList: [],
        peerBizList: [],
        sexList: [
          {label: "男", value: "男"},
          {label: "女", value: "女"}
        ]
      };
    },
    created() {
      $.editInit({partnerId: this.$route.query.id}).then(res => {
        if (res.success) {
          this.sourceList = res.data.source;
          this.provinceList = res.data.province;
          this.assetAttrList = res.data.attr;
          this.bizTypeList = res.data.bizTypeList;
          this.orgTypeList = res.data.orgTypeList;
          this.peerTypeList = res.data.peerTypeList;
          this.peerBizList = res.data.peerBizList;
          let partner = res.data.partner;
          this.form = partner
        }
      });
    },
    methods: {
      confirmTelephone() {
        if (!/^1[0-9]{10}$/.test(this.form.telephone)) {
          this.form.telephone = '';
        }
      },
      addtelephoneItem() {
        this.form.telephoneList.push({
          telephones: "",
        });
      },
      deletetelephoneItem(item, index) {
        this.form.telephoneList.splice(index, 1);
      },
      addItem1() {
        this.form.peerInfo.bizList.push({
          typeId: "",
          typeName: ""
        });
      },
      deleteItem1(item, index) {
        this.form.peerInfo.bizList.splice(index, 1);
      },
      addItem() {
        this.form.peerInfo.coopList.push({
          typeId: "",
          typeName: ""
        });
      },
      deleteItem(item, index) {
        this.form.peerInfo.coopList.splice(index, 1);
      },
      updateData() {
        if (!this.validate()) return;
        $.update(this.form).then(response => {
          if (response.success) {
            window.close();
          }
        });
      },
      closeWindow(){
        window.close();
      },
      validate() {
        let error = "";
        if (this.form.name.length <= 1) {
          error = "姓名至少两位\n";
        } else if (this.form.telephone.length < 11) {
          error = "手机号必填\n";
        } else if (!/^1\d{10}$/.test(this.form.telephone) && this.form.telephone.replace(" ", "") != "") {
          error = "手机号码不正确\n";
        } else if (this.form.company.length == 0) {
          error = "单位名称必填（没有单位写个人）\n";
        } else if ((this.form.peerInfo.bizSList+"").length==0){
          error = "同业业务类型必填\n";
        } else if ((this.form.peerInfo.coopSList+"").length==0){
          error = "同业合作方式必填\n";
        } else if (this.form.overArea.length == 0) {
          error = "请选择区域\n";
        } else if (this.form.email.length != 0 && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.form.email)
        ) {
          error = "邮箱不正确\n";
        }
        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      }
    }
  };
</script>
<style scoped>
  .red {
    color: red;
    font-size: 1.5rem;

    vertical-align: middle;
  }
</style>
